<template>
  <div class="progress-wrapper" :style="{ 'background-color': bgColor }">
    <div
      class="progress"
      :style="{ 'background-color': contentColor, width: `${percent}%` }"
    ></div>
  </div>
</template>
<script setup>
const props = defineProps({
  bgColor: {
    type: String,
    default: ''
  },
  contentColor: {
    type: String,
    default: ''
  },
  percent: {
    type: Number
  }
})
</script>
<style lang="less" scoped>
.progress-wrapper {
  position: relative;
  width: 100%;
  height: 5px;
  border-radius: 6px;
  background-color: blue;
  overflow: hidden;

  .progress {
    position: absolute;
    left: 0;
    border-radius: 6px;
    height: 100%;
    transition: 0.3s ease-in-out;
  }
}
</style>
